<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>华胜后台管理</title>
    <link rel="stylesheet" type="text/css" href="css/unified.css">
    <script src="plugins/layui/layui.js"></script>
    <style type="text/css">

    </style>
</head>
<body>

    <div class="breadcrumbnav">
        <span class="layui-breadcrumb " lay-separator="·">
          <a ><cite>首页</cite></a>
          <a ><cite>商品管理</cite></a>
          <a ><cite>上架商品</cite></a>
        </span>
    </div>
    <div class="kit-doc">
        <!-- 标题 -->


        <div class="kit-doc-title">

            <fieldset>
                <legend><a name="blockquote">上架</a>
                </legend>
            </fieldset>
        </div>
        <!-- 标题 end-->
        
        
        <!-- 概述 -->
        <div class="boderbox">
            <!--<div class="rowtop">-->
                <!--<button class="layui-btn addbtn openwinbtn" data-method="addmang">添加+</button>-->
                <!--<form class="layui-form searchform" action="" id="comSearchForm">
                    <select name="city" lay-verify="">
                      <option value="oderid">条码</option>
                      <option value="name">名称</option>
                    </select> 
                    <div class="layui-input-inline">
                      <input type="text" name="text" required lay-verify="required" placeholder="输入关键字" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-btn-group">
                      <button class="layui-btn">搜索</button>
                      <button class="layui-btn layui-btn-normal">重置</button>
                    </div>
                </form> -->
            <!--</div>-->
           
            <div class="layui-tab-content notab">
                <div class="layui-tab-item layui-show">
                     <table class="layui-table " lay-filter="table100" id="cMtable"></table>
                </div>
              </div>
              <!--图片的iframe-->
				<iframe id="framFile" name="framFile" style="display: none;"></iframe>
        		<iframe id="framFile1" name="framFile1" style="display: none;"></iframe>
             	<script type="text/html" id="checkboxTpl">
					<input type="checkbox" name="recommendState" value="{{d.id}}" title="推荐" lay-filter="lockDemo" {{ d.recommendState==1 ? 'checked' : '' }}>
				</script>
				
				<script type="text/html" id="checkboxTpl2">
	
					<input type="checkbox" name="shelfState" value="{{d.id}}" title="上架" lay-filter="lock2Demo" {{ d.shelfState==1 ? 'checked' : '' }}>
				</script>
				<script type="text/html" id="checkboxTpl3">
	
					<input type="checkbox" name="hotState" value="{{d.id}}" title="热销" lay-filter="lock3Demo" {{ d.hotState==1 ? 'checked' : '' }}>
				</script>
			
			
			<!--上架商品的表格内容-->
			<script id="addsaleBox" type="text/html">
	          <div class=" layui-layer-wrap">
	            <form class="layui-form layui-form-pane" action="" id="addform">
	              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">商品编号</label>
	                  <div class="layui-input-block">
	                    <input type="text" name="commodityNumber" autocomplete="off" lay-verify="number|required" placeholder="" class="layui-input">
	                  </div>
	                </div>
	              </div>
	              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">主销售商品号</label>
	                  <div class="layui-input-block">
	                    <input type="text" name="commodityId" autocomplete="off" lay-verify="required" placeholder="" class="layui-input">
	                  </div>
	                </div>
	              </div>
	
	              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">简称</label>
	                  <div class="layui-input-block">
	                    <input type="text" id="addTime" name="shortName" class="layui-input" >
	                    <!-- <input type="text" name="createTime" autocomplete="off" lay-verify="required"  placeholder="" class="layui-input">-->
	                  </div>
	                </div>
	              </div>
	              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">商品标题</label>
	                  <div class="layui-input-block">
	                    <input type="text" name="title" autocomplete="off" lay-verify="number|required" placeholder="" class="layui-input">
	                  </div>
	                </div>
	              </div>
	              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">小标题</label>
	                  <div class="layui-input-block">
	                    <input type="text" name="smallTitle" autocomplete="off" lay-verify="required" placeholder="" class="layui-input">
	                  </div>
	                </div>
	              </div>
	              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">条码</label>
	                  <div class="layui-input-block">
	                    <input type="text" name="barCode" lay-verify="required" autocomplete="off" class="layui-input" placeholder="">
	                  </div>
	                </div>
	              </div>
	              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">描述</label>
	                  <div class="layui-input-block">
	                    <input type="text" name="describes" autocomplete="off" lay-verify="required" placeholder="" class="layui-input">
	                  </div>
	                </div>
	              </div>
	              <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">商品介绍的url</label>
	                  <div class="layui-input-block">
	                    <input type="text" name="introduceUrl" lay-verify="required" autocomplete="off" class="layui-input" placeholder="">
	                  </div>
	                </div>
	              </div>
	              <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">商品介绍</label>
	                  <div class="layui-input-block">
	                    <textarea name="introduce" placeholder="" class="layui-textarea"></textarea>
	
	                  </div>
	                </div>
	              </div>
	              <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">原价</label>
	                  <div class="layui-input-block">
	                    <input type="text" name="originalPrice" lay-verify="required" autocomplete="off" class="layui-input" placeholder="￥">
	                  </div>
	                </div>
	              </div>
	              
	              
	              <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">销售单位</label>
	                  <div class="layui-input-block">
	                    <input type="text" name="saleUnit" autocomplete="off" lay-verify="required" placeholder="" class="layui-input">
	                  </div>
	                </div>
	              </div>
	               <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
	                <div class="layui-form-item">
	                  <label class="layui-form-label">分类id</label>
	                  <div class="layui-input-block">
	                    <input type="text" name="catalogId" lay-verify="required" autocomplete="off" class="layui-input" placeholder="">
	                  </div>
	                </div>
	              </div>
	              
	             
	             
	              
	              <div class="layui-col-xs12 layui-col-sm4 layui-col-md4 " >
	                <div class="layui-form-item" pane>
	                  <label class="layui-form-label">是否推荐</label>
	                  <div class="layui-input-block">
	                     <input type="checkbox" name="recommendState" lay-skin="switch" value="1">
	                  </div>
	                </div>
	              </div>
	              <div class="layui-col-xs12 layui-col-sm4 layui-col-md4" >
	                <div class="layui-form-item" pane>
	                  <label class="layui-form-label">是否热销</label>
	                  <div class="layui-input-block">
	                     <input type="checkbox" name="hotState" lay-skin="switch" value="1">
	                  </div>
	                </div>
	              </div>
	              <div class="layui-col-xs12 layui-col-sm4 layui-col-md4" >
	                <div class="layui-form-item" pane>
	                  <label class="layui-form-label">是否上架</label>
	                  <div class="layui-input-block">
	                  	 <input type="checkbox" name="shelfState" lay-skin="switch" value="1" checked>
	                  </div>
	                </div>
	              </div>
	              
	              </form>
	              <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
	                 <div class="layui-form-item">
	                 	
	                 	<!--<form action="http://hsmytest.vrdete.com/api/qiniu/update" method="post"  enctype="multipart/form-data" target="framFile"  class="updataform"  >--> 
	                 		<!--<input type="file" name="files"  multiple="true" class="file_upload" />  </form>-->
	                 	
	                 	<form action="#" method="post"  enctype="multipart/form-data" target="framFile1"  class="updataform1 imgbox"  > 
		                  	<input type="button" class="layui-btn-primary imgbtn"  value="选择主图" />
		                    <input type="file" class=" imgfile"  name="files"   multiple="true"   value="选择文件" accept="image/*" onchange="xmTanUploadImg(this)" />
		                  	<input type="button" class="layui-btn upNewimg"  value="确认上传"  style=""/>               
		                    <img id="xmTanImg" class="xmTanImg"  />
	                  </form>
	                	
		                  	
	                </div>
	                 
	                
	
	            </div>
	             
	          </div>
        </script>
        <!--上架商品的表格内容end-->
			
			<script src="js/jquery-3.2.1.min.js"></script>
			<script type="text/javascript" src="js/allajax.js"></script>
            
            <script>

            layui.use(['layer', 'form', 'element','table'], function(){
              var layer = layui.layer
              ,form = layui.form
              ,element = layui.element
              ,table = layui.table
              ,laypage = layui.laypage;
              //  目录查询全部树
				var tableArray = new Array();
				cMListFn(1 ,100 );
				function cMListFn(curr ,limit ){
					AjaxPostFn('system/commoditdetails/selectallpage?page='+curr+'&pagesize='+limit, "{'tosort':'asc','page':"+curr+",'pagerow':"+limit+",'shelfState':'1', 'sorting':'present_price'}", function(jsonData) {
						if(jsonData.dataResultList){
							
						}else
						if(jsonData.pageInfo.size!=0){
							$.each(jsonData.pageInfo.list, function(i, obj) {
							tableArray.push({
								"id":obj.id,
								"operation": " <a class='layui-btn ' lay-event='updataFile' name='files'>上传主图</a>",
								"commodityNumber": obj.commodityNumber,
								"title": obj.title,
								"commodityWeigh": obj.bizCommoditiesList[0].commodityWeigh,
								"commodityUnit": obj.bizCommoditiesList[0].commodityUnit,
								"commodityModel": obj.bizCommoditiesList[0].commodityModel,
								"tablemainphoto":"<img src='"+IMGUrl +'' +  obj.mainPhoto + "' alt='分类主图' class='classifyimg'>",
								"salesVolume":obj.salesVolume,
								"presentPrice1":obj.presentPrice/100,
								"merchantNumber":obj.merchantNumber,
								"recommendState":obj.recommendState,
								"shelfState":obj.shelfState,
						        "commodityId":obj.commodityId,
						        "shortName": obj.shortName,
						        "smallTitle": obj.smallTitle,
						        "listingDate":getMyDate( obj.listingDate  ),
						        "offlineDate":getMyDate( obj.offlineDate ),
						       	"originalPrice1":obj.originalPrice/100,
						 		"saleUnit": obj.saleUnit,
						        "hotState": obj.hotState,
						        "commodityStar": obj.commodityStar,
						        "describes":obj.describes,
						        "giftBarCodes": obj.giftBarCodes,
						        "withGiftIcon": obj.withGiftIcon,
						        "withGiftPhotos": obj.withGiftPhotos,
						        "introduceUrl": obj.introduceUrl,
						        "watchFrequency": obj.watchFrequency,
						        "createDate": obj.createDate,
						        "createId": obj.createId,
						        "updateDate":obj.updateDate,
						        "updateId": obj.updateId,
						        "catalogId": obj.catalogId,
						        "exhibitionPhoto":obj.exhibitionPhoto,
						        "introduce": obj.introduce,
						        "bizCommodityForSalePrice": obj.bizCommodityForSalePrice,
						        "bizCommoditys": obj.bizCommoditys,
						        "bizCommodityForSalePrices": obj.bizCommodityForSalePrices,
						        "adcode": obj.adcode,
						        "bizMerchantInfo": obj.bizMerchantInfo,
						        "bizCommodityForSaleCategory": obj.bizCommodityForSaleCategory,
						       	"barCode":obj.barCode
							});
						})
						}
						
						
						//展示已知数据
						table.render({
							elem: '#cMtable',
							cols: [
								[ //标题栏
								{type:'numbers',fixed: 'left',title: '行号'},
									{ field: 'id', minWidth: '0%', width: '0%',type: 'space',style: 'display:none' },
									{field: 'operation',width: 150,title: '操作',fixed: 'left'},
									{field: 'barCode',width: 200,title: '条码'},
									{field: 'commodityNumber',width: 150,title: '商品编号'},
//									{field: 'commodityId',width: 150,title: '主销售商品号'},
									{field: 'title',width: 300,title: '商品标题'+modDot,edit: 'text'},{field: 'shortName',width: 150,title: '简称'+modDot,edit: 'text'},
									
									{field: 'smallTitle',width: 100,title: '小标题'+modDot,edit: 'text'},
									{field: 'tablemainphoto',width: 100,title: '主图'},
									{field: 'originalPrice1',width: 100,title: '原价/元'+modDot,edit: 'text'},
									{field: 'presentPrice1',width: 100,title: '现价/元'+modDot,edit: 'text'},
									{field: 'listingDate',width: 150,title: '上市日期'},
//									{field: 'offlineDate',width: 150,title: '下市日期'},
									
									
									{field: 'saleUnit',width: 100,title: '销售单位'+modDot,edit: 'text'},
									
									{field: 'commodityStar',width: 100,title: '商品星级'},
									{field: 'describes',width: 100,title: '描述'+modDot,edit: 'text'},
							
									{field: 'introduceUrl',width: 300,title: '商品介绍的url'+modDot,edit: 'text'},
									{field: 'watchFrequency',width: 100,title: '点击量'},
									{field: 'createDate',width: 150,title: '创建日期'},
									{field: 'createId',width: 100,title: '创建人'},
									{field: 'updateDate',width: 150,title: '最后修改时间'},
									{field: 'salesVolume',width: 100,title: '销量'},
									{field: 'updateId',width: 100,title: '上传id'},
									{field: 'catalogId',width: 100,title: '分类id'},
									{field: 'merchantNumber',width: 100,title: '商户number'},
									
									
									{field: 'introduce',width: 300,title: '商品介绍'+modDot,edit: 'text'},
									{field: 'recommendState',width: 100,title: '是否推荐',templet: '#checkboxTpl',unresize: true ,fixed: 'right'},
									{field: 'hotState',width: 100,title: '是否热销',templet: '#checkboxTpl3',unresize: true ,fixed: 'right'},
									{field: 'shelfState',width: 100,title: '是否上架',templet: '#checkboxTpl2',unresize: true,fixed: 'right'}
									
									
								]
							],
							data: tableArray,
							size: 'lg',
							height:'full-250',
							even: true,
							page: true, //是否显示分页
							done: function(){
								//图片点击放大
				                TopimgFn();
//								laypage.render({
//								    elem: 'layui-table-page1' //注意，这里的 test1 是 ID，不用加 # 号
//								    ,count: jsonData.pageInfo.total//数据总数，从服务端得到
//								    ,jump: function(obj, first){
//									    //obj包含了当前分页的所有参数，比如：
//									    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
//									    console.log(obj.limit); //得到每页显示的条数
//									    //首次不执行
//									    if(!first){
//									      //do something
//									      cMListFn(obj.curr,obj.limit);
//									    }
//									  }
//								});
								  
								
							}
						});//数据渲染结束

					})
					
				}//cMListFn函数结束

				//是否推荐的开关
				form.on('checkbox(lockDemo)', function(obj) {
					var recommendState;
					obj.elem.checked ? recommendState= 1  : recommendState= 0 ;
					PdetUpdatebyidFn("{'id':'" + this.value + "','recommendState':'" + recommendState + "'}");
					
				});
				
				//是否上架的开关
				form.on('checkbox(lock2Demo)', function(obj) {
					var shelfState;
					obj.elem.checked ? shelfState= 1  : shelfState= 0 ;
					PdetUpdatebyidFn("{'id':'" + this.value + "','shelfState':'" + shelfState + "','hotState':'0','recommendState':'0'}");//取消上架之后也要相应的将改商品的热销跟推荐取消
				});
				//是否热销的开关
				form.on('checkbox(lock3Demo)', function(obj) {
					var shelfState;
					obj.elem.checked ? hotState= 1  : hotState= 0 ;
					PdetUpdatebyidFn("{'id':'" + this.value + "','hotState':'" + hotState + "'}");
				});
				
				//监听单元格编辑
				table.on('edit(table100)', function(obj) {
					var value = obj.value //得到修改后的值
						,
						data = obj.data //得到所在行所有键值
						,
						field = obj.field; //得到字段
						AjaxPostFn('system/commoditdetails/updatebyid', JSON.stringify(data), function(jsonData) {
				    	console.log(jsonData)
						if(jsonData.htmlState.status == 200) {
							layer.msg("修改成功");
						}
					});
				});
				
				
				//监听表格内的按钮
				table.on('tool(table100)', function(obj) {
	                var data = obj.data;
	                if(obj.event === 'updataFile') {
	                	//上传主图
	                	layer.open({

	                    title: '上传图片',
	                    area: ['390px', '260px'],
	                    shade: 0,
	                    maxmin: true,
	                    btn: ['上传'],
	                    content: ' <form action="'+AllUrl+'api/qiniu/update" method="post"  enctype="multipart/form-data" target="framFile"  class="updataform"  >  <input type="file" name="files"  multiple="true" class="file_upload" /></form>',
	                    yes: function() {
	                      thisid = data.id;
	                      $(".updataform").submit();
	
	                    },
	                    success: function(layero) {}
	                  });
	                  var thisid = 1;
	                  var framFile = document.getElementById('framFile');
	                  var imgdata;
	                  framFile.onload = function() {
	                    imgdata = framFile.contentWindow.document.getElementsByTagName("pre")[0].innerHTML;
	                    imgdata = JSON.parse(imgdata).dataResultObj[0];
	                    console.log(imgdata)
						
						AjaxPostFn('system/commoditdetails/updatebyid', "{'id':'" + thisid + "','mainPhoto':'" + imgdata + "'}", function(jsonData) {
					    	console.log(jsonData)
							if(jsonData.htmlState.status == 200) {
								layer.msg("修改成功");
								layer.closeAll();
								location.reload();
							}
								
						});
							
						
	                   }
	                	
	                }else if(obj.event === 'ModThis'){
	                	
	                }
                });
				
				
				$('.openwinbtn').on('click', function() {
	              var othis = $(this),
	                method = othis.data('method');
	              active[method] ? active[method].call(this, othis) : '';
	            });
				
	            var active = {
	              //                 弹出框事件
	              addmang: function() {
	                layer.open({
	                	type: 1, 
	                  skin: 'layui-layer-molv',
	                  title: '新增销售商品',
	                  area: ['900px', '700px'],
	                  content: $("#addBox").html(),
	                  skin: 'demo-class',
	                  btn: ["确认新增", "关闭"],
	                  maxmin: true,
	                  yes: function(index, layero) {
	                    //按钮1的回调
						 
	                    if(imgdata==undefined){
	                    	layer.msg("请选择图片上传");
	                    }else{
	                    	var thisdata = $("#addform").serializeJson();
		                    thisdata.mainPhoto = imgdata;
		                    console.log(thisdata);
		                    thisdata.createDate = new Date().getTime();
		                    AjaxPostFn('system/commoditdetails/insertinfo', JSON.stringify(thisdata), function(jsonData) {
			                    if(jsonData.htmlState.status == 200) {
			                      layer.msg("增加成功");
			                      location.reload();
	//		http://p2816srbo.bkt.clouddn.com/FvUtmSe1jLhZjSsH3RpiTPYmmba5
			                    }
			                })
	                    }
	                    
	                    
	//                  	thisdata.headPhoto = imgdata;
	                  
		                    
	                    
	//                  headPhoto
											
	
	                  },
	                  btn2: function(index, layero) {
	                    //按钮2的回调
	                  },
	                  cancel: function() {
	                    //右上关闭的回调
	                  },
	                  success: function() {
						//form初始化
	                    form.render();
	                    	$(".upNewimg").val("点击上传");
	                    //日期选择初始化
//						          laydate.render({ 
//											  elem: '#addTime',
//											  type: 'datetime',
//											  max: getnowtime()
//											});
$(".updataform1").attr("action",AllUrl+"api/qiniu/update")
							$(".updataform1").submit();
							//图片上传form的submit
							$(".upNewimg").click(function() {
					            $(".updataform1").submit();
					            
					        })
						//图片上传的frame的窗口
		                  var framFile1 = document.getElementById('framFile1');
		                  framFile1.onload = function() {
		                    console.log("最新窗口点击");
		                    imgdata = framFile1.contentWindow.document.getElementsByTagName("pre")[0].innerHTML;
		                    imgdata = JSON.parse(imgdata).dataResultObj[0];
		                    console.log(imgdata);
		                    if(imgdata == null){
		                    	$(".upNewimg").val("点击上传");
	//	                    	layer.msg("上传失败，请选择头像重新上传！");
		                    }else{
		                    	$(".upNewimg").val("上传成功");
		                    }
		                    	
	//	                    
		                  }
						
						
	                  }
	                })
	              }
	            }
			});
			
			
			
            
            function PdetUpdatebyidFn(data){
            	AjaxPostFn('system/commoditdetails/updatebyid', data, function(jsonData) {
			    	console.log(jsonData)
					if(jsonData.htmlState.status == 200) {
						layer.msg("修改成功");
//						layer.closeAll();
					}
						
				});
				
            }

            </script>
        </div>
        <!-- 概述 end-->
    </div>
</body>
</html>